<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
	

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			body {
				background-color: rgb(247, 247, 247);
			}
			
			.wrap {
				width: 100%;
				height: 100%;
			}
			/*导航栏--------------------------------------------------------------*/
			
			#navigation {
				width: 100%;
				height: 50px;
				background-color: rgba(29, 29, 29, 0.9);
				position: relative;
				z-index: 1;
			}
			
			#nav {
				width: 1000px;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
			}
			
			#nav_log {
				width: 25%;
				height: 100%;
				float: left;
			}
			
			#nav_junp {
				width: 40%;
				height: 100%;
				float: left;
				overflow: hidden;
			}
			
			#nav_junp>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#nav_load {
				width: 35%;
				height: 100%;
				float: right;
				overflow: hidden;
			}
			
			#nav_load>div {
				width: 50%;
				height: 100%;
				float: left;
			}
			
			#grapes_hover {
				width: 100%;
				position: absolute;
				overflow: hidden;
				background-color: white;
				z-index: 2;
			}
			
			#keepout {
				width: 1000px;
				height: 200px;
				margin-left: auto;
				margin-right: auto;
				display: none;
				overflow: hidden;
			}
			
			#keepout>div {
				width: 15%;
				height: 100%;
				float: left;
				position: relative;
			}
			
			#keepout>div>a>img {
				position: absolute;
				top: 10%;
				left: 11%;
				width: 75%;
				height: 55%;
				padding: 0 20px 0 0;
				border-right: 2px solid #ccc;
			}
			/*内容--------------------------------------------------------*/
			
			.middle {
				width: 100%;
				height: 80%;
			}
			/*第一页背景----------------------------------------------------------*/
			
			.one {
				width: 100%;
				position: relative;
			}
			
			.bg_one img {
				width: 100%;
			}
			
			.one_picleft {
				width: 38%;
				position: absolute;
				left: 20%;
				top: 6%;
				animation: one_picleft 1.5s forwards;
			}
			
			@-webkit-keyframes one_picleft {
				from {
					transform: translateX(-1200px);
				}
				to {
					transform: translateX(0);
				}
			}
			
			.one_picleft img {
				width: 100%;
			}
			
			.one_picright {
				width: 17%;
				position: absolute;
				right: 20%;
				bottom: 0;
				animation: one_picright 1.5s forwards;
			}
			
			@-webkit-keyframes one_picright {
				from {
					transform: translateY(-1200px);
				}
				to {
					transform: translateY(0);
				}
			}
			
			.one_picright img {
				width: 100%;
			}
			/*第二页背景---------------------------------------------------------*/
			
			.two {
				width: 100%;
				position: relative;
			}
			
			.bg_two img {
				width: 100%;
			}
			
			.two_picleft {
				width: 18%;
				position: absolute;
				left: 20%;
				top: 20%;
				animation: jb 2s forwards;
			}
			
			.two_picleft img {
				width: 100%;
			}
			
			.two_picright {
				width: 26%;
				position: absolute;
				left: 42%;
				top: 2%;
				animation: jb 2s forwards;
			}
			
			.two_picright img {
				width: 100%;
			}
			/*第三页.第五页.第七页所有视频-------------------------------------------------------------*/
			
			.three {
				width: 100%;
			}
			
			.video {
				margin: 2% 0 4%;
				text-align: center;
				position: relative;
			}
			
			.video>img {
				width: 45%;
			}
			
			.video1 {
				width: 36%;
				position: absolute;
				top: 15%;
				left: 32%;
			}
			
			.video1>img {
				width: 100%;
			}
			
			.my_video {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			/*第四页背景----------------------------------------------------------------------*/
			
			.four {
				width: 100%;
				position: relative;
			}
			
			.bg_four img {
				width: 100%;
			}
			
			.four_pic {
				width: 45%;
				position: absolute;
				left: 30%;
				top: 100%;
				display: none;
				animation: four_pic 1s forwards;
			}
			
			@-webkit-keyframes four_pic {
				from {
					transform: translateY(800px);
				}
				to {
					transform: translateY(0);
				}
			}
			
			.four_pic img {
				width: 100%;
			}
			/*第六页背景--------------------------------------------------------------*/
			
			.six {
				width: 100%;
				position: relative;
			}
			
			.bg_six img {
				width: 100%;
			}
			
			.six_pic {
				width: 50%;
				position: absolute;
				left: 26%;
				top: 7%;
				display: none;
				animation: four_pic 1s forwards;
			}
			
			.six_pic img {
				width: 100%;
			}
			/*第八页---------------------------------------------------------------*/
			
			.bg_eight {
				overflow: hidden;
			}
			
			.bg_eight>img {
				width: 100%;
				float: left;
				
				animation: jb 3s forwards;
			}
			@-webkit-keyframes jb {
				0%{opacity: 0;}
				20%{opacity: 0.2;}
				40%{opacity: 0.4;}
				60%{opacity: 0.6;}
				80%{opacity: 0.8;}
				100%{opacity: 1;}
			}
			
			/*下载部分-----------------------------------------------------------------*/
			
			.download {
				width: 100%;
				height: 360px;
				background-color: rgb(128, 99, 172);
				padding-top: 100px;
			}
			
			.center {
				width: 660px;
				height: 280px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.erweima {
				float: left;
				margin-left: 50px;
			}
			
			.erweima img {
				width: 200px;
			}
			
			.iPhone {
				width: 280px;
				height: 80px;
				border: 2px solid white;
				border-radius: 10px;
				background-color: rgb(100, 54, 160);
				float: right;
				margin-right: 60px;
				text-align: center;
			}
			
			.center span {
				line-height: 80px;
				color: white;
				font-size: 30px;
				margin-left: 30px;
			}
			
			.Android {
				width: 280px;
				height: 80px;
				border: 2px solid white;
				border-radius: 10px;
				background-color: rgb(100, 54, 160);
				float: right;
				margin-right: 60px;
				margin-top: 30px;
				text-align: center;
			}
			
			.text {
				float: left;
				color: white;
				font-size: 28px;
				margin-top: 40px;
			}
			/*页脚---------------------------------------------------*/
			
			#abyejiaoly {
				width: 100%;
				height: 220px;
				background-color: whitesmoke;
			}
			
			footer {
				width: 1000px;
				height: 100%;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
			}
			
			#footer_left {
				width: 20%;
				height: 80%;
				float: left;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle {
				width: 60%;
				height: 80%;
				float: left;
				overflow: hidden;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#footer_right {
				width: 20%;
				height: 80%;
				float: right;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle>div>a:hover {
				color: mediumpurple;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<!--导航-->
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php"><img class="nav_log_img" src="img/nav_logo.gif" /></a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div>
							<a id="first" href="putou.php">
								首页
							</a>
						</div>
						<!--葡萄产品-->
						<div>
							<a id="grapes" href="###">
								葡萄产品
							</a>
						</div>
						<!--葡萄纬度-->
						<div>
							<a id="latitude" href="latitude.php">
								葡萄纬度
							</a>
						</div>
						<!--APP下载-->
						<div>
							<a id="APPdownload" href="APP.php">
								APP下载
							</a>
						</div>
						<!--嘉年华-->
						<div>
							<a id="carnival" href="JNH.php">
								嘉年华
							</a>
						</div>
					</div>
					<div id="nav_load" class="nav_load">
						<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
					<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<div class="middle">
				<!--第一页------------------------------->
				<div class="one">
					<div class="bg_one">
						<img src="img/bg_one.png" />
					</div>
					<div class="one_picleft">
						<img src="img/part1_img2.png" />
					</div>
					<div class="one_picright">
						<img src="img/part1_img1.png" />
					</div>
				</div>
				<!--第二页----------------------------------->
				<div class="two">
					<div class="bg_two">
						<img src="img/bg_two.png" />
					</div>
					<div class="two_picleft">
						<img src="img/part2_img2.png" />
					</div>
					<div class="two_picright">
						<img src="img/part2_img1.png" />
					</div>
				</div>
				<!--第三页视频*----***-------------------------------------->
				<div class="three">
					<div class="video">
						<img src="img/video.png" />
						<div class="video1">
							<img src="img/video1_bg.png" />
							<div class="my_video" >
								<object type="application/x-shockwave-flash" data="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf" width="100%" height="100%" id="youku-player">
					<param name="allowFullScreen" value="true">
					<param name="allowScriptAccess" value="always">
					<param name="movie" value="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf">
					</object>
							</div>
						</div>
					</div>
				</div>
				<!--第四页---------------------------------------->
				<div class="four">
					<div class="bg_four">
						<img src="img/bg_three.png" />
					</div>
					<div class="four_pic">
						<img src="img/part4_img.png" />
					</div>
				</div>
				<!--第五页视频----------------------------------------------->
				<div class="five">
					<div class="video">
						<img src="img/video.png" />
						<div class="video1">
							<img src="img/video2_bg.png" />
							<div class="my_video" >
								<object type="application/x-shockwave-flash" data="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf" width="100%" height="100%" id="youku-player">
					<param name="allowFullScreen" value="true">
					<param name="allowScriptAccess" value="always">
					<param name="movie" value="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf">
					</object>
							</div>
						</div>
					</div>
				</div>
				<!--第六页---------------------------------------------------->
				<div class="six">
					<div class="bg_six">
						<img src="img/bg_four.png" />
					</div>
					<div class="six_pic">
						<img src="img/part6_img.png" />
					</div>
				</div>
				<!--第七页--------------------------------------------->
				<div class="seven">
					<div class="video">
						<img src="img/video.png" />
						<div class="video1">
							<img src="img/video3_bg.png" />
							<div class="my_video" >
								<object type="application/x-shockwave-flash" data="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf" width="100%" height="100%" id="youku-player">
					<param name="allowFullScreen" value="true">
					<param name="allowScriptAccess" value="always">
					<param name="movie" value="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf">
					</object>
							</div>
						</div>
					</div>
				</div>
				<!--第八页---------------------------------->
				<div class="eight">
					<div class="bg_eight">
						<img class="eight1" style="display: none;" src="img/part8_img.png" />
						<img class="nine" style="display: none;" src="img/part9_img.png" />
					</div>
				</div>
				<!--下载部分--------------------------------->
				<div class="download">
					<div class="center">
						<div class="erweima"><img src="img/erweima.png" /></div>
						<a href="https://itunes.apple.com/us/app/pu-tao-wei-du/id1067487375?l=zh&ls=1&mt=8">
							<div class="iPhone">
								<img src="img/iphone.png" /><span>iPhone</span>
							</div>
						</a>
						<div class="Android">
							<img src="img/andrio.png" /><span>Android</span>
						</div>
						<div class="text">用手机扫描上方二维码,或选择合适你的手机系统下载</div>

					</div>

				</div>

			</div>
			<!--页脚--------------------------------------->
			<div id="abyejiaoly">
				<footer>
					<div id="footer_left">

					</div>
					<div id="footer_middle">
						<div>
							<h4>订单中心</h4>
							<a href="###">售后政策</a>
							<a href="###">配送常见问题</a>
							<a href="###">支付方式</a>
							<a href="###">支付常见问题</a>
							<a href="###">购物指南</a>
						</div>
						<div>
							<h4>服务支持</h4>
							<a href="###">配送方式</a>
							<a href="###">隐私政策</a>
							<a href="###">账户常见问题</a>
							<a href="###">淘淘向右走常见问题</a>
							<a href="###">班德瑞使用常见问题</a>
						</div>
						<div>
							<h4>商务合作</h4>
							<a href="###">商务合作</a>
						</div>
						<div>
							<h4>关于葡萄</h4>
							<a href="###">关于葡萄</a>
							<a href="###">联系我们</a>
						</div>
						<div>
							<h4>关于我们</h4>
							<a href="###">葡萄纬度</a>
						</div>
					</div>
					<div id="footer_right">
						<a href="###"><img src="img/btn_consult_qq@2x.png" /></a>
						<a href="###"><h2>400-651-6161</h2></a>
					</div>
					<h6>Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司</h6>
					<a href="###">沪IC备15015904号-3</a>
				</footer>
			</div>
		</div>
	</body>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function  () {
			$(window).scroll(function  () {
				var four = document.querySelector(".four");
				var six = document.querySelector(".six");
				var eight1 = document.querySelector(".eight1");
				var nine = document.querySelector(".nine");
				var sclTop = $(window).scrollTop();
				var windowH = document.documentElement.clientHeight;
				var fourH = four.offsetTop;
				var h1 = fourH-windowH-sclTop;
				if (h1 <= -50 ) {
					$(".four_pic").css({
						display:"block",
						top:"10%"
					})
				} 
				var sixH = six.offsetTop;
				var h2 = sixH-windowH-sclTop;
				if (h2 <= -50 ) {
					$(".six_pic").css({
						display:"block"
					})
				} 
				var eightH = eight1.offsetTop;
				var h3 = eightH-windowH-sclTop;
				if (h3 <= 0 ) {
					$(".eight1").css("display","block");
				} 
				var nineH = nine.offsetTop; 
				var h4 = nineH-windowH-sclTop;
				if (h4 <= 0 ) {
					$(".nine").css("display","block");
				} 
			})
		})
		
		
		
	</script>
</html>